<template>
  <div class="coms-live-iframe-none">
    <div class="c-w100 c-bg-sgray" :class="spaceClass"></div>
    <div class="c-pv40 c-ph24">
      <div class="c-flex-row c-flex-center c-lh28 c-fw600" :style="'color:' + themeColor7">
        <div :style="'opacity: 0.5;transform: scaleY(0.6);background-image: linear-gradient(134deg,   #8e562900 0%,' + themeColor7 + ' 100%)'" class="c-ww100 c-hh4"></div>
        <span class="iconfont c-fs20 c-ph16">&#xe721;</span>
        <span class="c-fs28">{{vipConf && vipConf.freeModuleName ? vipConf.freeModuleName : '专享0元好课'}}</span>
        <span class="iconfont c-fs20 c-ph16">&#xe721;</span>
        <div :style="'opacity: 0.5;transform: scaleY(0.6);background-image: linear-gradient(134deg, ' + themeColor7 + ' 0%, #8e562900 100%);'" class="c-ww100 c-hh4"></div>
      </div>
      <water-fall class="c-mt20" v-model="vipHotList" ref="waterfall">
        <template v-slot:list="{list}">
          <div class="c-p c-br16 c-bg-white c-bd1-f6 c-mt16" v-for="(lItem, lIndex) in list" :key="lIndex" @click="goDetail(lItem)">
            <div class="c-ww288 c-maxh192 c-text-hidden c-p c-br-tl16 c-br-tr16">
              <img class="c-w100 imgCloseBig c-br-tl16 c-br-tr16" :src="$addXossFilter(lItem.avatar, require('../../../assets/defult270.png'))" />
            </div>
            <div class="c-pv16 c-ph20">
              <div class="c-fs24 c-fw600 c-lh36 c-text-ellipsis2">{{lItem.name}}</div>
              <div :style="'color:' + themeColor7" class="c-fw600 c-lh28">
                <span class="c-fs20">¥</span>
                <span class="c-fs26 c-ml4">0.00</span>
              </div>
              <div class="c-fs22 c-fc-gray c-text-decoration-through c-mt4">¥{{lItem.prodPrice}}</div>
            </div>
          </div>
        </template>
      </water-fall>
      <div class="c-fs24 c-flex-row c-flex-center c-mt30 c-lh28" @click="goMoreHot" :style="'color:' + themeColor7">
        <span>点击查看更多</span>
        <span class="iconfont c-fs20 c-ml10">&#xe635;</span>
      </div>
    </div>
  </div>
</template>

<script>
import waterFall from "@/components/templates/common/waterfall.vue";
import { goDetails } from "@/utils/goDetails.js";
export default {
  components: {
    waterFall
  },
  props: {
    vipHotList: {
      type: Array,
      default: () => []
    },
    vipConf: {
      type: Object,
      default: () => {}
    },
    themeColor7: {
      type: String,
      default: ''
    },
    spaceClass: {
      type: String,
      default: 'c-hh20'
    },
    type: {
      type: Number,
      default: 1
    },
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    // 跳转专享0元好课详情
    goDetail(item) { // courseType 课程类型，0: 视频 1: 音频 2: 文章,3:图片配音,4:网页转载 51:直播
      let type = item.prodType;
      let courseType = type == global.ckFrom.course ? item.courseType : type == 110 ? 0 : type == 111 ? 1 : type == 112 ? 2 : '';
      let prodType = type == 110 || type == 111 || type == 112 ? global.ckFrom.course : type;
      goDetails(this, prodType, item.prodId, '', courseType);
    },
    // 更多专享0元好课
    goMoreHot() {
      let querys = {
        typeNum: this.type == 1 ? 2 : 4
      }
      this.$routerGo(this, "push", { path: "/member/vip/vipRecommend", query: querys });
    },
  }
}
</script>

<style scoped>
</style>
